<template>
	<view class="agentP">
		<!-- 商户 -->
		<view class="agent">

			<view @click="goaddPosM" class="agent-title">
				<view :style="{fontSize: '0.89rem',fontFamily: 'PingFang SC',fontWeight: 450,color: '#FFFFFF'}">代理</view>
				<image :style="{ width:'0.5rem',height:'0.5rem' }" src="../../style/image/stati/A29.png" alt="">
			</view>

			<view class="agent-content">
				<view class="agent-content-item">
					<view>{{topData.shopCountTotal}}</view>
					<view>总商户数</view>
				</view>
				<view class="agent-content-item">
					<view>{{topData.shopCountMonth}}</view>
					<view>当月新增</view>
				</view>
				<view class="agent-content-item">
					<view>{{topData.shopCountDay}}</view>
					<view>当日新增</view>
				</view>
			</view>
		</view>
		<view class="agent">

			<view class="agent-title">
				<view :style="{fontSize: '0.89rem',fontFamily: 'PingFang SC',fontWeight: 450,color: '#FFFFFF'}">个人</view>

				<!-- <image :style="{ width:'0.5rem', height:'0.5rem' }" src="../../style/image/stati/A29.png" alt=""> -->

			</view>

			<view class="agent-contents">
				<view class="agent-content-items">
					<view>{{topData.userCountTotal}}</view>
					<view>总商户数</view>
				</view>
				<view class="agent-content-items">
					<view>{{topData.userCountNotTerminal}}</view>
					<view>无设备</view>
				</view>
				<view class="agent-content-items">
					<view>{{topData.notLineCount}}</view>
					<view>设备不在线</view>
				</view>
				<view class="agent-content-items">
					<view>{{topData.userCountMonth}}</view>
					<view>当月新增</view>
				</view>
			</view>
		</view>


		<view class="productP">

			<view class="searchPP">
				<view class="searchP">
					<view class="search" :style="{ width:'100%' }">
						<u-search placeholder="请输入商户姓名或电话" shape="round" v-model="keyword" :show-action='false'></u-search>
					</view>
					<!-- <view @click="celendarM" class="celendar">
                <image :style="{ width:'1.1rem',height:'1.1rem', margin:'0rem 0.5rem'}" src="../../style/image/stati/日历@3x.png" alt="">
                <view>2019.10.09</view>
                </view> -->

				</view>
			</view>


			<view class="celendar-base">

				<!-- <view @click="celendarM" class="celendar">
             <view class="celendar-child">
                <image :style="{ width:'0.9rem',height:'0.9rem', margin:'0rem 0.4rem'}" src="../../style/image/stati/A33.png" alt="">
                <view>2019.10</view>
             </view>
                </view> -->
				<view class="celendar">
					<TimeTest :selectTime='selectTime' @func="getMsgFormSon"></TimeTest>
				</view>

				<u-dropdown ref="uDropdown">

					<!-- <u-dropdown-item v-model="value2"  :title="value2" active-color='#02af74' :options="options2"  @change="changeOption2" ></u-dropdown-item> -->
					<u-dropdown-item active-color='#02af74' :title="value2">
						<view class="slot-content" style="background-color: #FFFFFF;">
							<scroll-view scroll-y="true" @click="closeDropdown" style="height: 200rpx;">
								<view v-for="(item,index) in options2" @click="change(item)" class="u-text-center u-content-color u-m-t-20 u-m-b-20">{{item.label}}</view>
							</scroll-view>
						</view>
					</u-dropdown-item>
				</u-dropdown>
			</view>
			<view class="allDataC" v-for="(item,index) in allData " :key="index">
				<view class="allDataC-item">
					<view class="allDataC-item-title">
						<!-- <view :style="{padding:'0.5rem 0rem',display:'flex',justifyContent: 'space-between'  }" class="allDataC-item-view" > -->
						<view :style="{ }" class="allDataC-item-view">
							<view :style="{ fontSize: '0.83rem',fontFamily: 'PingFang SC',fontWeight: 400,color: '#000000'}">{{item.shopName==null?'暂无商户':item.shopName}}<span
								 :style="{fontSize: '0.72rem',fontFamily: 'PingFang SC',fontWeight: 300,color: '#0FA773' }">{{ item.onlineState=='0'?'(设备在线)':'' }}</span></view>
							<view style=" font-size: 0.61rem;font-family: PingFang SC;font-weight: 300;color: #666666;padding: 0.2rem 0rem ">创建时间：{{item.createTime}}</view>
						</view>
						<image @click="calendarM(item.shopId)" style="width:1.5rem; height:1.5rem " src="../../style/image/stati/A18.png" alt="">
					</view>

					<view class="allDataC-item-content">
						<view class="itemData">
							<view>{{item.userMoney}}</view>
							<view class="dataText">我的总收益</view>
						</view>
						<view class="itemData">
							<view>{{item.shopMoney}}</view>
							<view class="dataText">商户收益</view>
						</view>
						<view class="itemData">
							<view>{{item.orderCountTotal}}</view>
							<view class="dataText">总订单数</view>
						</view>
						<view class="itemData">
							<view>{{item.payOrderCount}}</view>
							<view class="dataText">已支付订单</view>
						</view>
					</view>
					<view class="" style="border-bottom: 1px solid #e8e8e8;">
						<view class="prolifyP">
							<view style="display: flex;">
								<view style="font-size: 0.72rem;font-family: PingFang SC;font-weight: 400;color: #666666;">分润人:</view>
								<view style="margin-left: 3px;font-weight: 300;">{{item.userName}} {{item.phone}}</view>
							</view>
							<image @click="phoneM(item.phone)" style="width: 0.9rem;height: 0.9rem;" src="../../style/image/stati/A30.png"
							 alt="">
						</view>
					</view>

					<view class="agentprolify">
						<view style="font-weight: 400;">
							商户分润比例:
						</view>
						<p style="font-weight: 300;">
							{{item.profitPattern=='0'?'绝对':'相对'}}分润比例
						</p>
						<view style="font-weight: 300;">
							{{item.profitRatio*100+'%'}}
						</view>
					</view>

				</view>

			</view>

			<u-empty v-if="allData.length==0" text="暂无数据" mode="data"></u-empty>

		</view>

		<u-calendar v-model="show" :mode="mode" :safe-area-inset-bottom='true'></u-calendar>
	</view>

</template>

<script lang='ts'>
	import {
		Component,
		Prop,
		Vue,
		Watch,
		Emit
	} from "vue-property-decorator";

	import {
		shopStatistics,
		shopList,
		findTerminalBox,
		findShopBox,
	} from "../../utils/uniApi";

	import TimeTest from "../../views/test/timeTest.vue";

	@Component({
		//   @Component  是一个装修器   不可以在下面写语句
		name: "test",
		components: {
			TimeTest: TimeTest,
		},
	})
	export default class extends Vue {
		@Prop({
			type: String, // 父组件传递给子组件的数据类型
			required: false, // 是否必填
			default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
		})
		msg!: string;

		public mode = "date";
		public keyword = "";

		public topData = {
			notLineCount: 0,
			shopCountDay: 0,
			shopCountMonth: 0,
			shopCountTotal: 0,
			userCountMonth: 0,
			userCountNotTerminal: 0,
			userCountTotal: 2,
		};

		public show = false;
		public allData: Array < object > = [];
		public value2 = "全部商户";

		public options2: Array < object > = [];

		public sn = "";

		public shopId = ""; //商户id

		//日期
		public dateTime = "";
		public dateType: string = ""; //month 按月查询,day 按天查询

		public selectTime = "";

		created() {
			// document.body.scrollTop = document.documentElement.scrollTop = 0;
			//    alert(1)
		}

		onHide() {
			console.log("商户页面关闭");

			uni.hideLoading();
		}
		mounted() {
			uni.showLoading({
				title: "加载中",
			});

			uni.setStorage({
				key: "staticCurrent",
				data: 3,
				success: function() {},
			});

			this.nowDate();

			this.shopDrop();

			this.accordingM();

			let param = {
				userId: uni.getStorageSync("userId") == "" ?
					"" :
					parseInt(uni.getStorageSync("userId")),
			};

			shopStatistics(param).then((res: any) => {
				console.log(res, "商户-统计上面数据");
				this.topData = res.data.data
			});
		}

		calendarM(data: any) {
			uni.redirectTo({
				url: '../../pages/stati/actData?data='+data
			});
		}
		phoneM(data: any) {
			// console.log('123213',)
			uni.makePhoneCall({
				// 手机号
				phoneNumber: data,
				// 成功回调
				success: (res) => {
					console.log("调用成功!");
				},
				// 失败回调
				fail: (res) => {
					console.log("调用失败!");
				},
			});
		}

		goaddPosM() {
			uni.redirectTo({
				url: "../../pages/stati/newAdd",
			});
		}

		nowDate() {
			let datas = new Date();

			function formatDate(datas: any) {
				var myyear = datas.getFullYear();
				var mymonth = datas.getMonth() + 1;
				var myweekday = datas.getDate();

				if (mymonth < 10) {
					mymonth = "0" + mymonth;
				}
				if (myweekday < 10) {
					myweekday = "0" + myweekday;
				}
				return myyear + "-" + mymonth + "-" + myweekday;
			}

			console.log(formatDate(datas), "日期日期日期");

			this.selectTime =
				formatDate(datas).split("-")[0] + "-" + formatDate(datas).split("-")[1];

			// this.$emit('func',this.selectTime,'month')
		}

		shopDrop() {
			let param = {
				shopId: "",
				userId: uni.getStorageSync("userId") == "" ?
					"" :
					parseInt(uni.getStorageSync("userId")),
			};
			findShopBox(param).then((res: any) => {
				console.log(res, "ress商户下拉");
				res.data.data.filter((item: any, index: any) => {
					// console.log(item.shopName,index)
					let obj: object = {
						label: item.shopName, //设备名
						value: index, //索引
						id: item.id, //商户id
					};
					this.options2.push(obj);
				});
			});
		}
		accordingM() {

			uni.showLoading({
				title: "加载中",
			});

			this.allData = [];

			let params = {
				userId: uni.getStorageSync("userId") == "" ?
					"" :
					parseInt(uni.getStorageSync("userId")),
				shopId: this.shopId, //	查询条件非必传
				dateType: this.dateType,
				keyWord: this.keyword,
				dateTime: this.dateTime, //查询时间
			};

			shopList(params)
				.then((res: any) => {

					//    uni.showLoading({
					//   title: "加载中",
					// });
					console.log(res, "商户列表");

					res.data.data.filter((item: any, index: any) => {
						this.allData.push(item);
						return this.allData;
					});
				})
				.then((res: any) => {

					if (res.length > 0) {
						console.log(res, "000000000");

						setTimeout(() => {
							uni.hideLoading();
						}, 1500);
					}

				});
		}
		getMsgFormSon(data: any, timeType: string) {
			// alert('999')
			console.log("子组件的数据", data, timeType);
			this.dateType = timeType;
			this.dateTime = data;
			this.accordingM();
		}

		change(data: any) {

			console.log(data, 'data')

			this.value2 = data.label;

			// this.sn = data.label;

			this.shopId = data.id

			this.accordingM();

		}
		closeDropdown() {

			// console.log('guanbi')

			(this.$refs.uDropdown as any).close();

			console.log('guanbi')

		}

		changeOption2(index: any) {
			console.log(index, "2222");

			this.options2.filter((item: any, indexd: any) => {
				console.log(item.label, "item.shopName", index, indexd);
				if (item.value == index) {
					console.log(item.label, "item.shopName");
					this.value2 = item.label;

					this.sn = item.label;
					console.log(this.sn, " this.sn this.sn this.sn");
					this.accordingM();
				}
			});
		}

		search() {
			uni.showLoading({
				title: "加载中",
			});

			this.accordingM();
		}

		@Watch("keyword")
		userInputM(a: any, b: any) {}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-empty {
		background-color: white;
		padding: 2rem;
	}

	/deep/.u-cell-box {
		height: 20rem;
		overflow-y: scroll;
	}

	.u-dropdown {
		width: 100%;
		justify-content: flex-end;
		display: flex;
		padding-right: 3rem;
	}

	/deep/.u-dropdown {
		width: 100%;
		justify-content: flex-end;
		display: flex;
		padding-right: 3rem;
	}

	.agentP {}

	.agent {
		background: linear-gradient(180deg, #02af74, #0bd372);
		border-radius: 0.8rem;
		margin: 1rem;
	}

	.agent-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		/* margin: 0.5rem 0.5rem; */
		padding: 0.5rem 1rem;
		border-bottom: 1px solid #82dcba;
	}

	.agent-content {
		display: flex;
		padding: 0.5rem 1rem 1rem 1rem;
		/* justify-content: ; */
	}

	.agent-content-item {
		width: 33.3%;
		text-align: center;
	}

	/* 个人 */
	.agent-contents {
		display: flex;
		padding: 0.5rem 1rem 1rem 1rem;
		/* justify-content: ; */
	}

	.agent-content-items {
		width: 25%;
		text-align: center;
	}

	.agent-content-items :first-child {
		font-size: 0.83rem;
		font-family: PingFang SC;
		font-weight: 300;
		color: #ffffff;
	}

	.agent-content-items :nth-child(2) {
		font-size: 0.73rem;
		font-family: PingFang SC;
		font-weight: 300;
		color: #ffffff;
	}

	.agent-content-item :first-child {
		font-size: 0.83rem;
		font-family: PingFang SC;
		font-weight: 300;
		color: #ffffff;
	}

	.agent-content-item :nth-child(2) {
		font-size: 0.83rem;
		font-family: PingFang SC;
		font-weight: 300;
		color: #ffffff;
	}

	.prolify {
		font-size: 0.78rem;
		font-family: PingFang SC;
		font-weight: 300;
		color: #ffffff;
	}

	.productP {
		background-color: #f3f5f7;
		padding: 0.4rem 0rem 0rem 0rem;
	}

	.searchPP {
		background-color: white;
		padding: 0.5rem;
	}

	.searchP {
		background-color: white;
		display: flex;
		width: 100%;
		justify-content: space-between;
	}

	.celendar-base {
		display: flex;
		align-items: center;
		margin: 0.2rem 0rem;
	}

	/deep/.u-dropdown {
		width: 100%;
		justify-content: flex-end;
		justify-content: flex-end;
		padding-right: 3rem;
	}

	.celendar {
		position: absolute;
		z-index: 999;
		width: 50%;
		display: flex;
		align-items: center;
		// justify-content: center;
		margin-left: 2rem;
	}

	.celendar-child {
		display: flex;
		align-items: center;
		background-color: white;
		padding: 0.3rem;
		border-radius: 5px;
	}

	.celendar :nth-child(2) {
		font-size: 0.72rem;
		font-family: PingFang SC;
		/* font-weight: 300; */
		color: #000000;
	}

	.totle-contents {
		/* border-bottom-right-radius: 0.8rem;
    border-bottom-left-radius: 0.8rem; */
		border-radius: 0.2rem;
		background-color: white;
		justify-content: space-between;
		display: flex;
		padding: 1rem 0.5rem;
		margin: 0rem 1rem 0.5rem 1rem;
	}

	.totle-contents-item {
		width: 33.3%;
		text-align: center;
	}

	.totle-contents-item :first-child {
		font-size: 0.85rem;
		font-family: PingFang SC;
		font-weight: 300;
		color: #02b074;
	}

	.totle-contents-item :nth-child(2) {
		font-size: 0.65rem;
		font-family: PingFang SC;
		font-weight: 300;
	}

	.allDataC {
		margin: 0.1rem 0.5rem 0.5rem 0.5rem;
		border-radius: 0.2rem;
		background-color: white;
	}

	.allDataC-item-title {
		/* display: flex;
    justify-content: space-between; */
		padding: 1rem;
		border-bottom: 1px solid#e8e8e8;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.allDataC-item-view {}

	.allDataC-item-content {
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid#e8e8e8;
	}

	.itemData {
		text-align: center;
		padding: 1rem 0.5rem;
		width: 25%;
		text-align: center;
	}

	.itemData :first-child {
		margin-bottom: 0.3rem;
	}

	.dataText {
		font-size: 0.67rem;
		font-family: PingFang SC;
		font-weight: 399;
		color: #000000;
	}

	.prolifyP {
		display: flex;
		padding: 0.8rem 1rem;
		justify-content: space-between;
	}

	/* 加上标签 或者加上>   */
	.agentprolify {
		display: flex;
		align-items: center;
		padding: 0.8rem 1rem;
	}

	.agentprolify :first-child {
		font-size: 0.72rem;
		font-family: "PingFang SC";
		font-weight: 300;
		color: #666666;
	}

	.agentprolify> :nth-child(1) {}

	.agentprolify> :nth-child(2) {
		color: red;
	}
</style>
